/****
  考试列表组件，仅支持复制和选择考试，及设置考试名称，状态，时间信息
***/
<template>
  <div class="setting-content inside-comment">
    <h2 class="setting-header">
      <strong>考试管理</strong>
    </h2>
    <div class="top-btns">
      <SearchCmp v-if="searchCmpArray.length" :searchCmpArray="searchCmpArray" :searchForm="queryData" @onSubmit="getTableData" />
    </div>
    <RuifoxTable
      :loading="tableLoading"
      :table-data="tableData"
      :field-list="fieldList"
      :default-index="false"
      :default-checkbox="true"
    >
      <!-- <template #default-checkbox="{ element }">
        <div class="table-div-check">
          <el-checkbox
            class="unmover"
            v-model="element.checked"
            @change="handleCheckTable(element.id)"
            size=""
          />
        </div>
      </template> -->

      <!-- 考试访问模式 -->
      <template #accessMode="{ element }">
        <div>
          <el-tag v-if="element.permissionConfig.accessMode == 'PUBLIC'" type="primary">完全公开</el-tag>
          <el-tag v-if="element.permissionConfig.accessMode == 'MEMBER'" type="primary">指定成员</el-tag>
          <el-tag v-if="element.permissionConfig.accessMode == 'PASSWORD'" type="primary">口令密码</el-tag>
          <el-tag v-if="element.permissionConfig.accessMode == 'EXCLUSIVE'" type="primary">专属考试</el-tag>
        </div>
      </template>
      
      <!-- 状态 -->
      <template #status="{ element }">
        <div>
          <el-tag v-if="element.status == 'UNSEALED'" type="primary">草稿</el-tag>
          <el-tag v-if="element.status == 'NORMAL'" type="success">已发布</el-tag>
          <el-tag v-if="element.status == 'DISABLE'" type="info">禁用</el-tag>
        </div>
      </template>

      <!-- 开始时间列 -->
      <template #startTime="{ element }">
        <span v-if="element.startTime && element.startTime != ''">{{ formatDate(element.startTime,"yyyy-MM-dd hh:mm") }}</span>
      </template>

      <!-- 结束时间列 -->
      <template #endTime="{ element }">
        <span v-if="element.endTime && element.endTime != ''">{{ formatDate(element.endTime,"yyyy-MM-dd hh:mm") }}</span>
      </template>

      <!-- 考试时长列 -->
      <template #duration="{ element }">
        <span v-if="!element.duration">-</span>
      </template>

      <!-- 操作列 -->
      <template #options="{ element }">
        <div class="table-td-option unmover">
          <el-button type="primary" link @click="checkExam(element)">选择</el-button>
        </div>
      </template>
    </RuifoxTable>
    <PaginationView
      :isAffix = "false"
      :total="queryData.total"
      :pageSize="queryData.pageSize"
      :currentPage="queryData.currentPage"
      :allChoose="isAllChooseBtn"
      :pageChoose="isPageChooseBtn"
      :options="batchOptions"
      :checkedNum="checkedNum"
      :canChoose="queryData.total > 0"
      @changeSize="handleSizeChange"
      @currentChange="handleCurrentChange"
      @changePageChoose="handlePageChoose"
      @changeAllChoose="handleAllChoose"
      @invertChoose="handleInvertChoose"
      @checkOption="handleBatchOptions"
      @refreshList="getTableData"
      @cancelChoose="handleResetPagination"
      v-if="tableData.length > 0"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { formatDate } from '@/utils/tools'
import { 
  selectExamPageExam,
  // copyAndNewExam
 } from "@/api/examination";
import { tableList as mixTable } from '@ruifox-cms/utils'
// import { ElMessage } from 'element-plus'

const statusOption = ref([
  { label: "未公开", value: 'UNSEALED' },
  { label: "正常", value: 'NORMAL' },
  { label: "禁用", value: 'DISABLE' },
]);
const typeOption = ref([
  { label: "完全公开", value: 'PUBLIC' },
  { label: "指定成员", value: 'MEMBER' },
  { label: "口令密码", value: 'PASSWORD' },
  { label: "专属考试", value: 'EXCLUSIVE' },
]);
const searchCmpArray = ref([
  { label: '考试状态', key: 'status', form_type: 'select', options: statusOption.value },
  { label: '考试访问模式', key: 'accessMode', form_type: 'select', options: typeOption.value },
  { label: '考试名称', key: 'name'}
])
const {
  queryData,
  tableData,
  tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  checkedList,
  getTableData,
  // handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  // handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: selectExamPageExam,
});
const defaultQuery = reactive({
  currentPage: 1,
  pageSize: 10,
  total:10,
  sort:"",
  order: "",
  name:"",
  status: "",
  openType: "",
  businessKey: "",
  timeLimit: "",
  creator: ""
});

Object.assign(queryData, defaultQuery);

//复制考试
const checkExam = async (item) => {
  console.log("item",item);
  
  checkedList.value.push(item)
  // const res = await copyAndNewExam({
  //   examId: item.id
  // });
  // if(res.code === 20000){
  //   ElMessage.success("复制成功");
  //   getTableData();
  // }
}

const fieldList = ref([
  {
    title: "名称",
    name: "name",
  },
  // {
  //   title: "说明",
  //   name: "description",
  // },
  {
    title: "状态",
    name: "status",
  },
  {
    title: "访问模式",
    name: "accessMode",
  },
  {
    title: "开始时间",
    name: "startTime",
    visible: true,
  },
  {
    title: "结束时间",
    name: "endTime",
    visible: true,
  },
  {
    title: "考试时长(分钟)",
    name: "duration",
    visible: true,
  },
  {
    title: "总分",
    name: "totalScore",
    visible: true,
  },
  {
    title: "及格分数",
    name: "qualifyScore",
    visible: true,
  },
  {
    title: "操作",
    name: "options",
    width: 50,
    fixed: "right",
  },
]);

onMounted(async() => {
  await getTableData();
});

const getExam = () => {
  console.log("checkedList",checkedList);
  
  return checkedList.value
}

// 暴露方法给父组件
defineExpose({
  getExam,
})
</script>

<style scoped lang="scss">
.top-btns{
  display: flex;
  margin: 10px 0;
  justify-content: space-between;
  /* align-items: center; */
  .add-button{
    margin-right: 10px;
  }
}

::v-deep .el-step.is-simple .el-step__title{
  font-size: 14px;
}

.step-item{
  cursor: pointer;
  &.cur{
    font-weight: bold;
  }
}

::v-deep .el-step.is-simple:not(:last-of-type) .el-step__title {
  width: max-content;
  max-width: 90%;
}

.table-td-option{
  display: flex;
  align-items: center;
}

.exam-draw{
  /* width: 800px; */
  display: flex;
  &.tips{
    .menu-list{
      top: 85px;
    }
  }
  .menu-list{
    display: flex;
    flex-direction: column;
    /* position: fixed;
    top: 65px;
    left: 20px; */
    .step-item{
      margin-bottom: 10px;
      font-size: 16px;
      color: $black_2;
      &.cur{
        font-weight: bold;
        color: $mainColor;
      }
    }
  }
  .exam-form{
    margin-left: 120px;
  }
  .exam-info{
    margin-bottom: 20px;
    border: 1px solid $borderColor;
    box-shadow: 0 0 10px rgba(black,.1);
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    min-width: 500px;
    width: 520px;
    h3{
      margin-bottom:  10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .certificate-item{
      margin: 10px 0;
      padding: 15px 15px 0;
      box-sizing: border-box;
      border: 1.5px dashed #bbb;
      border-radius: 5px;
    }
    .form-item-tip{
      color: $black_2;
    }
    .form-row{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .row-item{
        width: 50%;
      }
      .del-icon{
        font-size: 18px;
        color: #e85252;
        margin-bottom: 15px;
        &:hover{
          color: #e52c2c;
        }
      }
    }
  }
}
.sync-exam-container{
  display: flex;
  flex-direction: column;
  height: 100%;
  .tip{
    font-size: 14px;
    margin-bottom: 10px;
    color: $mainColor;
  }
  .exam-container{
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    .menu-list{
      width: 100px;
      display: flex;
      flex-direction: column;
      position: absolute;
      left: 0;
      top: 0;
      .step-item{
        margin-bottom: 10px;
        font-size: 16px;
        color: $black_2;
        &.cur{
          font-weight: bold;
          color: $mainColor;
        }
      }
    }
    .exam-draw{
      height: 100%;
      .exam-form{
        margin-left: 120px;
      }
    }
  }
}
.question-group-config{
  width: 480px;
  .tip{
    margin-top: 10px ;
    color: $black;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .item-set-config{
    margin-top: 10px ;
    padding: 15px 15px 0;
    box-sizing: border-box;
    border: 1.5px dashed #bbb;
    border-radius: 5px;
    /* box-shadow: 0 0 10px rgba(0,0,0,0.1); */
    .form-row{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .row-item{
        width: 50%;
      }
      .del-icon{
        font-size: 18px;
        color: #e85252;
        margin-bottom: 15px;
        &:hover{
          color: #e52c2c;
        }
      }
    }
  }
  
}

</style>